<template>
	<view>
		<scroll-view  class="page" >
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="content">子账户列表</block>
			</cu-custom>
			<!-- <view class="padding flex flex-direction">
			  <view v-for="(item) in list">
			  <div style="border: 10px;">{{item.Phone}}</div>
			  <div >{{item.Type}}</div>
			  <div >{{item.Territory}}</div> 
			  <div style="width: 10rem;" > </div>
			  <div >{{dateFormat(item.CreateTime)}}</div>
			  </view>
			</view> -->
			 <view offset-top="28">
			         <div style="scroll:" class="tableHeader" >
			           <div class="tableHeaderName" style="width: 30%;">姓名</div>
			           <div class="tableHeaderName" style="width: 38%;">公司</div>
			           <!-- <div class="tableHeaderName" style="width: 16%;">手机号</div> -->
			           <div class="tableHeaderName" style="width: 10%;">产品数</div>
			           <div class="tableHeaderName" style="width: 22%;border-radius: 0 20rpx 0 0;">创建时间</div>
			         </div>
			         <scroll-view  scroll-y="true" scroll-x="true" class="scroll-Y">
			           <div class="tableContent"  v-for="(item) in list" @tap="gobilling(item.Id,item.RealName)" >
			             <div class="tableContentName" style="width: 30%;" ><view style="margin: 20rpx;">{{item.RealName}}</view></div>
			             <div class="tableContentName" style="width: 38%;"><view style="margin: 20rpx;">{{item.SupplieName}}</view></div>
			             <!-- <div class="tableContentName" style="width: 16%;" ><view style="margin: 20rpx;">{{item.UserPhone}}</view></div> -->
			             <div class="tableContentName" style="width: 10%;" ><view style="margin: 20rpx;">{{item.inventoryCount}}</view></div>
			             <div class="tableContentName" style="width: 22%;" ><view style="margin: 20rpx;">{{dateFormat(item.CreateTime)}}</view></div>
			           </div>
			         </scroll-view>
			 </view>
			
			 <view v-if="flag">
			    <view class="">没有数据了</view>
			 </view>
			
		</scroll-view>
	</view>

</template>

<script>
	
	export default {
		data() {
			return {
				list:[],
				flag:false
			}
		},
		onLoad: function (option) {
			this.loadCount();
		},
		methods: {
			loadCount(){
				let url = 'Base_Manage/Base_User/GetMainDataList';
				this.$http.post(url,{SortField:'CreateTime',SortType:'desc',Search:{IsSubAccount:true}}).then(res=>{
					console.log("res::",res)
					console.log("res::",res.data.Success)
				  if(res.data.Success){
					this.list = res.data.Data
					if(res.data.Total==0){
						this.flag=true;
					}
					console.log("resJson.Data",this.list)
				  }
				})
			},
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				// return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				return year + "-" + month + "-" + day;
			},
			gobilling(id,username){
				console.log(id);
				console.log(name);
				uni.navigateTo({
					url: 'billing?id='+id+'&name='+username
				});
			}
		}
	}
</script>

<style>
	/*table样式梳理*/
	.tableHeader{
	  display: flex;
	}
	.tableHeaderId{
	  width: 85rpx;
	  height: 70rpx;
	  background-color:#F4F6FF ;
	  border-radius: 20rpx 0 0 0;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 22rpx;
	  font-weight: bold;
	  color: #333333;
	  border: 1rpx solid #DDE2FA;
	}
	.tableHeaderName{
	  width: 230rpx;
	  height: 70rpx;
	  background-color: #F4F6FF;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 22rpx;
	  font-weight: bold;
	  color: #333333;
	  border: 1rpx solid #DDE2FA;
	}
	.tableHeaderItem{
	  width: 168rpx;
	  height: 70rpx;
	  background-color: #F4F6FF;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 22rpx;
	  font-weight: bold;
	  color: #333333;
	  border-radius: 0 20rpx 0 0;
	  border: 1rpx solid #DDE2FA;
	}
	.tableContent{
	  display: flex;
	}
	.tableContentId{
	  width: 86rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  min-height: 108rpx;
	  background-color:#F8FCFF;
	  border: 1rpx solid #DDE2FA;
	}
	.tableContentName{
	  width: 230rpx;
	  font-size: 22rpx;
	  color: #333333;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  border: 1rpx solid #DDE2FA;
	}
	.tableContentRight{
	  width: 173rpx;
	  font-size: 22rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  // flex-direction: column;
	  flex-wrap: wrap;
	  border: 1rpx solid #DDE2FA;
	}
</style>
